<template>
  <div class="xh">
    <div id="XHmain" :style="{ width: '100%', height: '250px' }"></div>
  </div>
</template>

<script>
import {formatNum}  from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: "XhFinance",
  data() {
    return {
      campaignStatistics: '',
      show: true,
      dateEchart: undefined,
      screenLength: ''
    }
  },
  props: {
    allNumber: Number,
    isSymol: String,
    zbData: Array,
    zbName: Array,
    xData: {
      type: Object,
      default: () => {
        return {}
      }
    }
    // xData: Array
  },
  mounted() {
    const el = document.getElementById('XHmain')
    let a = document.body.clientWidth
    if (a < 1800)  {
      this.screenLength = '19%'
    }
    else {this.screenLength = '21%'}
    this.dateEchart = this.$echarts.init(el)
     window.addEventListener('resize', () => {
      if (this.dateEchart && this.dateEchart.resize) {
        this.dateEchart.resize()
      }
    })
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    opened() {
      return this.sidebar.opened
    },
    screenLength() {
      let a = document.body.clientWidth
      if (a < 1200) return '18%'
      else return '21%'
    }
  },
  watch: {
    screenLength:{
      deep: true,
      handler:function(newV,oldV){
        this.screenLength = newV
        this.$nextTick(function(){
          this.initEchart(this.isSymol)
        })
      }
    },
    allNumber: {
      deep: true,
      immediate: true,
      handler:function(newV,oldV){
        this.allNumber = newV
        this.$nextTick(function(){
          this.initEchart(this.isSymol)
        })
      }
    },
    zbData: {
      deep: true,
      immediate: true,
      handler:function(newV,oldV){
        this.zbData = newV
        this.$nextTick(function(){
          this.initEchart(this.isSymol)
        })
      }
    },
    zbName: {
      deep: true,
      immediate: true,
      handler:function(newV,oldV){
        this.zbName = newV
        this.$nextTick(function(){
          this.initEchart(this.isSymol)
        })
      }
    },
    xData: {
      deep: true,
      immediate: true,
      handler:function(newV,oldV){
        this.xData = newV
        this.$nextTick(function(){
          this.initEchart(this.isSymol)
        })
      }
    },
    opened() {
      if (this.dateEchart) {
        const that = this
        this.$nextTick(() => {
          if (this.dateEchart && this.dateEchart.resize) {
            setTimeout(() => {
              that.dateEchart.resize()
            }, 200)
          }
        })
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
  },
  methods: {
    initEchart(data) {
      let clientlabels = this.zbName
      let clientcounts = this.zbData
      let screenLength = this.screenLength
      let all = this.allNumber
      this.dateEchart.setOption({
        tooltip: {
          trigger: "item",
          show: true,
          textStyle: {
            color: "#ACB6C2",
            fontSize: "14",
          },
          // formatter: `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+params.color+'"></span> {b} : 消耗：${data}{c} 占比：{d}%`
          formatter: function (params) {
             if (params.name.indexOf('_3YData_') !== -1) {
              let str = params.name
              let first = str.indexOf('_') + 1
              let gang = str.indexOf('_', first)
              params.name = str.substring(gang).substring(1,str.length)
            }
            let str = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+params.color+'"></span>'
            +params.name+"   "+ "占比:" + params.percent +  "%"
             + " 消耗:" + data+ formatNum(params.value.toFixed(2))
            return str
          }
        },
        legend: {
          selectedMode:false, //鼠标禁止点击
          orient: 'vertical',
          y: 'center',
          left: "55%",
          width: "20%",
          icon: "circle",
          itemHeight: 7, //修改icon图形大小
          // data: clientlabels,
          data: this.xData,
          formatter: function (name) {
            let index = 0
            clientlabels.forEach(function (value, i) {
              if (value == name) {
                index = i;
              }
            });
            if (name.indexOf('_3YData_') !== -1) {
              let str = name
              let first = str.indexOf('_') + 1
              let gang = str.indexOf('_', first)
              name = str.substring(gang).substring(1,str.length)
            }
            return `{b| ${name.length>15 ? name.slice(0,12)+'...' : name} }` + `{a| ${data}${clientcounts[index].toFixed(2)} }`
          },
          textStyle: {
            color: "#ACB6C2",
            fontSize: "12",
            scroll: "screen",
            rich: {
              a: {
                fontSize:14,
                align:'left',
                // padding:[0,15,0,0],
                width:120,
                color: '#39444e'
                // lineHeight:25
              },
              b: {
                fontSize:14,
                verticalAlign:'top',
                align:'left',
                width: 140,
                color: '#ACB6c2'
                // padding:[0,15,28,0]
              }
            }
          },
        },
        graphic: { // 添加原生图形元素组件
          show: false,
          elements: [{
            type: 'text', // 组件类型
            left: `${screenLength}`, //定位
            top: '38%', // 定位,
            style: { // 样式
              text: [
                "消耗总额",
                `${data}${all.toFixed(2)}`,
                ].join('\n\n'), //文字
              fontSize: 16, //文字大小
              fontWeight: "bold",
              fontFamily: 'PingFang SC',
              textAlign: 'center', //定位
              width: 30,
              height: 30,
              fill: '#33404A'// 字体颜色
            },
          }]
        },
    //       title: [
    //     {
    //         text: '消耗总额',
    //         left: '21%',
    //         top: '42%',
    //         textStyle: {
    //             color: '#33404A',
    //             fontSize: 16,
    //             fontWeight: "bold",
    //           fontFamily: 'PingFang SC',
    //         },
    //     },
    //     {
    //         text:  `${data}${all.toFixed(2)}`,
    //          left: '21%',
    //         top: '50%',
    //         textStyle: {
    //             fontSize: 16,
    //             color: '#33404A',
    //             fontWeight: "bold",
    //           fontFamily: 'PingFang SC',
    //         },
    //     },
    // ],
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["70%", "90%"],
            right: "50%",
            avoidLabelOverlap: false,
            hoverAnimation:false,
            // roseType: 'radius',
            labelLine: {
              show: false,
            },
            // data: this.xData,
            data: this.xData,
            label: {
              show: false ,
              position: "center",
              color: "#39444E",
              fontWeight: "bold",
              fontSize: "22",
              formatter: function (name) {
                  // this.series[0].label.show = false
                  return '消耗'+'\n\n'+data + all;
              },
            },
            emphasis: {
              // shadowBlur: 10,
              // shadowOffsetX: 0,
              shadowColor: 'rgba(0,0,0,0.5)',
              label: {
                show: false,
                color: "#39444E",
                fontSize: "16",
                fontWeight: "bold",
                // formatter: `${data}{c}`,
                formatter: function (name) {
                  return '消耗'+'\n\n'+data + formatNum(name.value);
                },
              },
            }
          },
        ],
      });
    }
  },
};
</script>

<style lang="scss" scoped>
#XHmain {
  box-sizing: border-box;
  display: flex;
  width: 100%;
}
</style>
